<template>
	<view class="bank">
		<hx-navbar ref="hxnb" :config="config">
			<block slot="right">
				<image style="justify-content: right;width: 64rpx;height: 64rpx;margin-right:30rpx;"
					src="../../static/plate/add.png" mode="aspectFit" @tap="onClickBtn">
				</image>
			</block>
		</hx-navbar>
		<uni-swipe-action ref="swipeAction" style="padding: 30rpx;">
			<uni-swipe-action-item v-for="(item, index) in swipeList" :right-options="item.options" :key="item.id"
				@change="swipeChange($event, index)" @click="swipeClick($event, index)" style="margin-bottom: 20rpx;">
				<view style="color: #FFFFFF;border-radius: 12rpx;">
					<image style="width: 690rpx;height:220rpx;position: relative;" :src="item.backgroundImage" mode="">
					</image>
					<view style="position: absolute;top: 0;margin: 30rpx">
						<view class="flex" style="align-items: center;width: 100%;">
							<image style="width: 88rpx;height: 88rpx;" :src="item.image" mode=""></image>
							<view style="margin-left: 20rpx;">
								<h4 style="font-size: 36rpx;font-weight: 500;">{{item.name}}</h4>
								<view style="font-size: 28rpx;font-weight: 300;">{{item.type}}</view>
							</view>
						</view>
						<view class="flex" style="line-height:58rpx;margin-top: 24rpx;">
							<text style="margin-left: 136rpx;font-size: 50rpx;">****</text>
							<text style="margin-left: 30rpx;font-size: 50rpx;">****</text>
							<text style="margin-left: 30rpx;font-size: 50rpx;">****</text>
							<text
								style="font-weight: 400;font-size: 50rpx;margin-left: 66rpx;">{{item.cardNumber}}</text>
						</view>
					</view>
				</view>
			</uni-swipe-action-item>
		</uni-swipe-action>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				config: {
					title: '银行卡',
					color: '#111111',
					backgroundColor: [1, '#FFFFFF'],
					rightSlot: true,
					border: true,
					// #ifdef H5
					backPage: '',
					// #endif
				},
				swipeList: [{
						options: [{
							text: '删除',
							style: {
								backgroundColor: 'transparent',
								color: '#1E1E1E4D'
							}
						}],
						id: 0,
						name: '招商银行',
						type: "信用卡",
						image: '../../../static/me/zs.png',
						backgroundImage: '../../../static/me/8361.png',
						cardNumber: '0732'
					},
					{
						options: [{
							text: '删除',
							style: {
								backgroundColor: 'transparent',
								color: '#1E1E1E4D'
							}
						}],
						id: 1,
						name: '招商银行',
						type: "储蓄卡",
						image: '../../../static/me/1133.png',
						backgroundImage: '../../../static/me/8360.png',
						cardNumber: '1984'
					},
					{
						options: [{
							text: '删除',
							style: {
								backgroundColor: 'transparent',
								color: '#1E1E1E4D'
							}
						}],
						id: 2,
						name: '建设银行',
						type: "储蓄卡",
						image: '../../../static/me/js.png',
						backgroundImage: '../../../static/me/8362.png',
						cardNumber: '0722'
					},
					{
						options: [{
							text: '删除',
							style: {
								backgroundColor: 'transparent',
								color: '#1E1E1E4D'
							}
						}],
						id: 3,
						name: '农业银行',
						type: "信用卡",
						image: '../../../static/me/ny.png',
						backgroundImage: '../../../static/me/8363.png',
						cardNumber: '0532'
					}
				]
			}
		},
		methods: {
			swipeChange(e, index) {
				console.log('返回：', e);
				console.log('当前索引：', index);
			},
			// 银行卡添加
			onClickBtn(data) {
				//console.log(data);
				// uni.showToast({
				// 	title: `key为 ${data.key} 的按钮`,
				// 	icon: 'none',
				// 	duration: 1300
				// });
				this.$tools.goPageNoAuth('/clientEnd/page/revenue/addCard')

			},
			// 银行卡删除
			swipeClick(e, index) {
				let {
					content
				} = e;
				if (content.text === '删除') {
					uni.showModal({
						title: '提示',
						content: '是否删除',
						success: res => {
							if (res.confirm) {
								this.swipeList.splice(index, 1);
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.showToast({
						title: `点击了删除按钮`,
						icon: 'none'
					});
				}
			}
		}
	}
</script>

<style scoped>
	.bank {}
</style>
